<template>
    <div class="container">
        <el-row>
            <el-col :span="24">
                <el-carousel :interval="4000" type="card" height="20vh">
                    <el-carousel-item v-for="item in url" :key="item">
                        <el-image :src="item"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <!-- 下方主体区域 -->
        <el-row :gutter="20">
            <!-- 热区推荐区域 -->
            <el-col :span="16" class="hot_box">
                <!-- 热门景区 -->
                <HotCard :hot_items="hot_scenic_spot" :title="'热门景区'" :user="'hot_scenic_spot'" :loading="scenic_loading" />
                <!-- 热门酒店 -->
                <HotCard :hot_items="hot_hotel" :title="'热门酒店'" :user="'hot_hotel'" :loading="hotel_loading" />
                <!-- 热门旅行社 -->
                <HotCard :hot_items="hot_travel_agency" :title="'热门旅行社'" :user="'hot_travel_agency'"
                    :loading="agency_loading" />
            </el-col>
            <!-- 通告 -->
            <el-col :span="8">
                <!-- 公告 -->
                <el-card class="box-card" shadow="none">
                    <div slot="header" class="clearfix">
                        <span><svg-icon iconname="icon-gonggao"></svg-icon> 公告</span>
                    </div>
                    <el-row :gutter="20" class="notice_box">
                        <el-col :span="24">
                            <el-card class="box-card" v-for="it in notice" :key="it.id" shadow="none">
                                <div slot="header" class="clearfix">
                                    <span>{{ it.title }}</span>
                                    <el-button style="float: right;" type="text"
                                        @click="() => $router.push({ path: '/user/index/hot/notice', query: { id: it.id } })">详情</el-button>
                                    <p class="time_sender">{{ it.send_time }} | {{ it.sender }}</p>
                                </div>
                                <div class="notice_content">
                                    {{ it.content }}
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty v-if="this.notice.length === 0" description="暂无数据"></el-empty>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import HotCard from './hot_card.vue'
export default {
    components: {
        HotCard
    },
    data() {
        return {
            hot_scenic_spot: [],
            hot_hotel: [],
            hot_travel_agency: [],
            notice: [],
            count_down: 1,
            url: [
                "https://youimg1.c-ctrip.com/target/100i12000000rth5vAE6E.jpg",
                "https://img1.qunarzz.com/travel/d9/1706/69/26ff8348ee53ceb5.jpg",
                "https://youimg1.c-ctrip.com/target/100l0k000000bewlmDD4D.jpg",
            ],
            clock: null,
            scenic_loading: true,
            hotel_loading: true,
            agency_loading: true,
            notice_loading: true,
        };
    },

    created() {
        this.get_hot_scenic_spot()
        this.get_hot_hotel()
        this.get_hot_travel_agnecy()
        this.get_notice()
        this.get_countdown()
    },

    beforeDestroy() {
        window.clearInterval(this.clock);
    },
    methods: {

        // 获取热门景区
        async get_hot_scenic_spot() {
            this.scenic_loading = true
            // console.log('get_hot_scenic_spot')
            try {
                const res = await this.$http.get("/findThreeAttractions");
                this.hot_scenic_spot = res.data.data
                this.scenic_loading = false
            } catch (error) {
                // console.log(error);
            }
        },


        // 获取热门酒店
        async get_hot_hotel() {
            this.hotel_loading = true
            // console.log('get_hot_hotel')
            try {
                const res = await this.$http.get("/findThreeHotels");
                this.hot_hotel = res.data.data
                this.hotel_loading = false
            } catch (error) {
                // console.log(error);
            }
        },

        // 获取热门旅行社
        async get_hot_travel_agnecy() {
            this.agency_loading = true
            // console.log('get_hot_travel_agnecy')
            try {
                const res = await this.$http.get("/findThreeAgency");
                this.hot_travel_agency = res.data.data
                this.agency_loading = false
            } catch (error) {
                // console.log(error);
            }
        },

        // 倒计时
        get_countdown() {
            this.clock = window.setInterval(() => {
                setTimeout(this.get_notice, 0)
            }, 1000)
        },


        // 获取公告内容
        async get_notice() {
            this.notice_loading = true
            // console.log('get_notice')
            try {
                const res_1 = await this.$http.post("/findAllWarningDone", {
                    pageNum: 1,
                    pageSize: 100,
                });
                const res_2 = await this.$http.post("/findAllWarningNoRequired", {
                    pageNum: 1,
                    pageSize: 100,
                });
                // console.log(res_1)
                this.notice = [...res_1.data.data.information, ...res_2.data.data.information]
                this.notice_loading = false
            } catch (error) { }
        },
    },
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .hot_box {
        height: 67vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */
    }

    .notice_box {
        color: #99a9bf;
        font-size: 0.5em;
        height: 55vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;

        /* Firefox */
        .notice_content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .time_sender {
        color: #99a9bf;
        font-size: 0.5em;
    }

    .notice_box::-webkit-scrollbar,
    .hot_box::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
}
</style>